import React from "react";
import { AutoComplete, Icon, Input } from "antd";

const { Option } = AutoComplete;

class AutoCompleteAPP extends React.Component {
    state = {
        dataSource: []
    };

    onSearch = keyword => {
        if (!keyword) {
            return;
        }

        this.setState({
            dataSource: [
                {
                    title: "AntDesign",
                    count: 10000
                },
                {
                    title: "AntDesign UI",
                    count: 10600
                },
                {
                    title: "AntDesign design language",
                    count: 100000
                }
            ]
        });
    };

    render() {
        const { dataSource } = this.state;

        const options = dataSource.map(group => (
            <Option key={group.title} value={group.title}>
                {group.title}
                <span className="certain-search-item-count">{group.count} people</span>
            </Option>
        ));
        return (
            <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                dropdownStyle={{ width: 300 }}
                size="large"
                style={{ width: "100%" }}
                dataSource={options}
                placeholder="搜索APP名称"
                optionLabelProp="value"
                onSearch={this.onSearch}
                {...this.props}
            >
                <Input
                    suffix={
                        <span onClick={e => this.onSearch(e.target.value)} style={{ color: "#4bb7ff" }}>
                            <Icon type="search" className="certain-category-icon" />
                        </span>
                    }
                />
            </AutoComplete>
        );
    }
}

export default AutoCompleteAPP;
